const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry:path.resolve(__dirname,"src/components/index.ts"),
    mode:"development",
    externals: {
      antd: "antd",
      react: "react"
    },
    output: {
      library: 'ui-design-demo',
      libraryTarget: 'umd',
      filename: 'bundle.js',
      path:path.resolve(__dirname,"dist")
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
    module:{
      rules: [
        {
          test: /\.tsx?$/,
          use: ['babel-loader','ts-loader'],
          exclude: /node_modules/,
        },
        {
            test: /\.(le|c)ss$/i,
            use: [
              {
                loader:MiniCssExtractPlugin.loader,
                /*options: {
                  publicPath: 'images/'
                }*/
              },
              {
                loader: "css-loader"
              },
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: ['autoprefixer'],
                  },
                  sourceMap: true,
                },
              },
              // 将 less 编译成 CSS
              'less-loader'
            ],
        },
        {
          test:/\.(gif|jpg|png)$/,
          loader:"file-loader",
          options: {
            name: '[name].[ext]',
            outputPath: 'images'
          }
        },
        {
          test:/\.(ttf|woff|woff2)$/,
          loader:"file-loader",
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts'
          }
        }
      ]
    }, 
    plugins:[
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({
        filename:"app.css"
      })
    ]
};

